<template>
	<view class="index">
		
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<view class="press-tips">点击输入行上边的名称可语音输入</view>
		
		<!-- #endif -->
		
		
		<view class="uni-card">
			<view class="item-tabs">
				<text class="item-tab" v-for="(item, index) of tabs" :key="index" :class="[item.id == id ? 'atvi' : '']" 
				@click="setItem(item.id, index)">{{item.name == title ? title+(index+1): item.name}}</text>
			</view>
			
			<view class="uni-list">
				<label-input v-for="(item, index) of sampleItem" ref="mpvuePicker" :key="index" :child_data="item" :alldata="sampleItem" :commondata="data.common.value" :inkey="index" :oneData="oneData" :tabIndex="tabIndex" @input_value="inputValue"></label-input>
			</view>
		</view>
		
		<view class="btn-row uni-flex">
			<button type="primary" class="primary uni-flex-item" style="margin-right: 10upx;" @tap="save">保存</button>
			<button type="primary" class="primary uni-flex-item" @tap="nextItem" v-if="tabIndex < tabs.length-1">保存并下一个</button>
			<button type="primary" class="primary uni-flex-item" @tap="lastItem" v-if="tabIndex >= tabs.length-1">保存并上传</button>
		</view>
		
	</view>
</template>

<script>
	
	import net from '../../net.js';
	import service from '../../service.js';
	import utils from '../../common/utils.js';
	import labelInput from '../../components/label-input.vue';
	import uploaddata from '../../uploaddata.js';
	
	export default {
		components: {
			labelInput
		},
		data() {
			return{
				data: {
					common: {},
					cyd_info: {},
				},
				sampleItem: {},
				id: '',
				tabs: [],	// 
				codeId: 0,	// 任务code
				tableId: 0,	//
				title: '',	// 采样表标题
				tabIndex: 0,	// tab 的 index
				oneData: null	// 第一个样品数据
			}
		},
		onLoad(res) {
			this.codeId = res.codeId;
			this.tableId = res.tableId;
			this.id = res.id;
			let data = service.getTaskDetailItem(this.codeId, this.tableId);
			this.tabs = [];
			Object.assign(this.data, data);
			this.initData();
		},
		onReady() {
			this.initItem();
		},
		methods: {
			//组件传值事件,input组件传出的新值
			inputValue(newdata,key){
				console.log(newdata,key);
				this.sampleItem[key]=newdata;
			},
			initData() {
				let list = this.data.cyd_info.value;
				this.title = this.data.cyd_info.title;
				for(let item in list) {
					let name = (list[item] && list[item].code && list[item].code.value) || '样品信息';
					this.tabs.push({name: name, id: item});
				}
				
				this.oneId = this.tabs[0];
				this.oneData = list[this.oneId.id];
				
				this.sampleItem = list[this.id];
				
				this.tabs.some((item, index)=>{
					if(item.id == this.id) {
						this.tabIndex = index;
						return true;
					}
				});
			},
			setItem(id, index){
				if(this.id == id) return;
				this.id = id;
				this.sampleItem = this.data.cyd_info.value[this.id];
				this.tabIndex = index;
				this.initItem();
			},
			initItem(){
				setTimeout(()=>{
					this.$refs.mpvuePicker && this.$refs.mpvuePicker.forEach((item, index)=>{
						item.init();
					});
				}, 100);
			},
			// 保存并下一个
			nextItem(){
				this.saveData();
				this.tabIndex++;
				this.id = this.tabs[this.tabIndex].id;
				this.sampleItem = this.data.cyd_info && this.data.cyd_info.value[this.id];
				this.initItem();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			// 保存并上传
			lastItem(){
				this.saveData(true);
			},
			// 保存
			save(){
				this.saveData();
			},
			// 保存数据
			saveData(isSubmit = false){
				
				uni.showLoading({title: '', mask: true});
				
				service.setTaskDetailItem(this.codeId, this.tableId, this.data, 'cyd_info');
				utils.exeMainCallBack({}, '上传');
				if (!isSubmit) {
					uni.hideLoading();
					uni.showToast({icon: 'none', title: '保存成功'});
				} else {
					uploaddata.uploadSampleData(false, true);
				}
			}
		},
	}
</script>

<style>
	.index{
		width: 100%;
	}
	
	.uni-card {
		margin: 10upx 0 60upx 0;
		border-radius: 0;
	}
	
	.item-tabs {
		display: flex;
		flex-wrap: wrap;
		padding: 10upx 15px 0;
	}
	
	.item-tab {
		border: 1px solid #007AFF;
		padding: 10px;
		margin: 0 5px 10px;
		font-size: 32upx;
	}
	
	.item-tab.atvi {
		color: #FFFFFF;
		background: #0FAEFF;
	}
	
	.uni-list-cell:after {
		left: 0;
	}
	
	.uni-list-cell {
		padding: 0 20upx;
		min-height: 90upx;
		color: #666;
	}
	
	.uni-list-cell.con-list {
		flex-wrap: wrap;
	}
	
	.uni-list-cell.con-list text {
		flex: 0 0 100%;
		font-size: 32upx;
	}
	
	
	
	.uni-list-cell-divider ~ .uni-list-cell {
		padding-left: 50upx;
		min-height: 70upx;
	}
	
	.uni-list-cell.no-left {
		padding-left: 20upx;
	}
	
</style>
